/**
 *
 * Created by Fesine on 2017/5/5.
 */
$(document).ready(function () {

    var sub = $('#sub');
    var activeRow;
    var activeMenu;
    var timer;
    var mouseInSub = false;
    sub.on('mouseenter', function (e) {
        mouseInSub = true;
    })
        .on('mouseleave', function (e) {
            mouseInSub = false;
        });
    var mouseTack = [];
    var moveHandler = function (e) {
        mouseTack.push({
            x:e.pageX,
            y:e.pageY
        });
        if(mouseTack.length >3) {
            mouseTack.shift();
        }
    };

    $('#test')
        .on('mouseenter', function (e) {
            sub.removeClass('none');
            $(document).bind('mousemove', moveHandler)
        })
        .on('mouseleave', function (e) {
            sub.addClass('none');
            if (activeRow) {
                activeRow.removeClass('active');
                activeRow = null;
            }
            if (activeMenu) {
                activeMenu.addClass('none');
                activeMenu = null;
            }
            $(document).unbind('mousemove',moveHandler)
        })
        .on('mouseenter', 'li', function (e) {
            if (!activeRow) {
                activeRow = $(e.target).addClass('active');
                activeMenu = $('#' + activeRow.data('id'));
                activeMenu.removeClass('none');
                return;
            }
            if (timer) {
                clearTimeout(timer);
            }
            var currMousePos = mouseTack[mouseTack.length - 1];
            var leftCorner = mouseTack[mouseTack.length - 2];
            var isNeedDelay = needDelay(sub, leftCorner, currMousePos);
            if (isNeedDelay) {
                timer = setTimeout(function () {
                    if (mouseInSub) {
                        return;
                    }
                    activeRow.removeClass('active');
                    activeMenu.addClass('none');

                    activeRow = $(e.target);
                    activeRow.addClass('active');
                    activeMenu = $('#' + activeRow.data('id'));
                    activeMenu.removeClass('none');
                    timer = null;
                }, 300);
            }else {
                var preActiveRow = activeRow;
                var preActiveMenu = activeMenu;

                activeRow = $(e.target);
                activeMenu = $('#' + activeRow.data('id'));
                preActiveRow.removeClass('active');
                preActiveMenu.addClass('none');

                activeRow.addClass('active');
                activeMenu.removeClass('none');
            }


        })
});
